body {margin: 0; font-family: sans-serif;}

/* header */
.layout-header {padding: 20px 15px 30px;}
.layout-header h1 {margin: 0;}
.layout-header p {margin: 0; font-size: 13px;}

/* control */
.api-control {margin: 30px 15px 0; border-top: 1px solid #999;}
.api-control > h1 {font-size: 20px; color: #222; margin: 0 0 5px; padding: 0 0 0 5px;}
.api-control nav {font-size: 14px; padding: 3px 10px; background: #f1f1f1;}
.api-control nav p {margin: 8px 0;}
.api-control nav button {
  padding: 8px 12px; margin: 0 5px 4px 0;
  font-family: 'Helvetica', Arial, sans-serif; font-size: 11px; color: #fff; font-weight: 400;
  border: none; text-transform: uppercase; cursor: pointer; background: #999; border-radius: 0;
}
.api-control > section {margin: 20px 0;}

/* make image */
#makeImageArea {margin: 0; padding: 15px; min-height: 100px; border: 1px dashed #20B292;}
#makeImageArea canvas,
#makeImageArea img {
  display: block; margin: 0 auto; border: 1px solid rgba(0,0,0,.05);
}